<template>
  <div class="land-management-container agri-page-container">
    <!-- 页面标题与操作按钮 -->
    <div class="page-header agri-page-header">
      <div class="page-title agri-page-title">
        <el-icon><Location /></el-icon>
        <span>土地管理</span>
      </div>
      <div class="page-actions agri-page-actions">
        <el-button type="primary" @click="handleAddLand">
          <el-icon><Plus /></el-icon>添加土地
        </el-button>
        <el-button @click="refreshData">
          <el-icon><Refresh /></el-icon>刷新
        </el-button>
      </div>
    </div>

    <!-- 土地列表 -->
    <el-card class="land-list-card agri-card" v-loading="loading">
      <el-tabs v-model="activeTab" class="agri-tabs-wrapper">
        <el-tab-pane label="卡片视图" name="card">
          <div v-if="lands.length === 0" class="empty-data">
            <el-empty description="暂无土地数据，点击添加土地按钮创建" />
          </div>
          <el-row :gutter="20" v-else>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="land in lands" :key="land.id">
              <el-card shadow="hover" class="land-card" agri-card>
                <div class="land-card-header">
                  <div class="land-card-title">{{ land.name }}</div>
                  <el-dropdown @command="handleCommand($event, land)">
                    <el-button type="text" size="small">
                      <el-icon><More /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="view">查看详情</el-dropdown-item>
                        <el-dropdown-item command="edit">编辑</el-dropdown-item>
                        <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <div class="land-card-image" @click="handleViewLand(land)">
                  <img :src="land.image || 'https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=500&auto=format&fit=crop'" alt="土地图片">
                </div>
                <div class="land-card-content">
                  <div class="land-card-item">
                    <div class="land-card-item-label">位置</div>
                    <div class="land-card-item-value text-ellipsis">{{ land.location }}</div>
                  </div>
                  <div class="land-card-item">
                    <div class="land-card-item-label">面积</div>
                    <div class="land-card-item-value">{{ land.area }} 亩</div>
                  </div>
                  <div class="land-card-item">
                    <div class="land-card-item-label">土地类型</div>
                    <div class="land-card-item-value">{{ getLandTypeName(land.type) }}</div>
                  </div>
                  <div class="land-card-item">
                    <div class="land-card-item-label">土壤类型</div>
                    <div class="land-card-item-value">{{ getSoilTypeName(land.soilType) }}</div>
                  </div>
                  <div class="land-card-item">
                    <div class="land-card-item-label">pH值</div>
                    <div class="land-card-item-value">{{ land.ph }}</div>
                  </div>
                </div>
                <div class="land-card-footer">
                  <el-button type="primary" size="small" @click="handleEditLand(land)">编辑</el-button>
                  <el-button size="small" @click="handleViewLand(land)">详情</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        
        <el-tab-pane label="表格视图" name="table">
          <div class="agri-table-wrapper" v-if="lands.length > 0">
            <el-table :data="lands" style="width: 100%">
              <el-table-column prop="name" label="名称" min-width="120" />
              <el-table-column prop="location" label="位置" min-width="180" show-overflow-tooltip />
              <el-table-column prop="area" label="面积(亩)" min-width="100" />
              <el-table-column prop="soilType" label="土壤类型" min-width="120" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.status === 'idle' ? 'success' : 'warning'">
                    {{ scope.row.status === 'idle' ? '空闲' : '使用中' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="scope">
                  <div class="agri-operations">
                    <el-button type="primary" size="small" @click="handleEditLand(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDeleteLand(scope.row)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else class="empty-data agri-empty-data">
            <el-empty description="暂无土地数据，点击添加土地按钮创建" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加/编辑土地对话框 -->
    <div class="agri-dialog-wrapper">
      <el-dialog
        v-model="dialogVisible"
        :title="isEdit ? '编辑土地' : '添加土地'"
        width="650px"
      >
        <el-form
          ref="landFormRef"
          :model="landForm"
          :rules="landRules"
          label-width="100px"
          label-position="right"
        >
          <el-form-item label="土地名称" prop="name">
            <el-input v-model="landForm.name" placeholder="请输入土地名称，如：东区水稻田" />
          </el-form-item>
          
          <el-form-item label="地理位置" prop="location">
            <el-input v-model="landForm.location" placeholder="请输入详细地址" />
          </el-form-item>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="面积(亩)" prop="area">
                <el-input-number v-model="landForm.area" :min="0.1" :precision="1" :step="0.5" :controls-position="'right'" style="width: 100%" />
                <div class="current-value">当前值: {{ landForm.area }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="土地类型" prop="type">
                <el-select v-model="landForm.type" placeholder="请选择土地类型" style="width: 100%">
                  <el-option label="水田" :value="1" />
                  <el-option label="旱地" :value="2" />
                  <el-option label="果园" :value="3" />
                  <el-option label="菜地" :value="4" />
                  <el-option label="其他" :value="5" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="土壤类型" prop="soilType">
                <el-select v-model="landForm.soilType" placeholder="请选择土壤类型" style="width: 100%">
                  <el-option label="砂质土" :value="1" />
                  <el-option label="粘土" :value="2" />
                  <el-option label="壤土" :value="3" />
                  <el-option label="石灰土" :value="4" />
                  <el-option label="其他" :value="5" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="灌溉条件" prop="irrigation">
                <el-select v-model="landForm.irrigation" placeholder="请选择灌溉条件" style="width: 100%">
                  <el-option label="差" :value="1" />
                  <el-option label="一般" :value="2" />
                  <el-option label="好" :value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="pH值" prop="ph">
                <el-input-number v-model="landForm.ph" :min="0" :max="14" :precision="1" :step="0.5" :controls-position="'right'" style="width: 100%" />
                <div class="current-value">当前值: {{ landForm.ph }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="肥力等级" prop="fertility">
                <el-select v-model="landForm.fertility" placeholder="请选择肥力等级" style="width: 100%">
                  <el-option label="低" :value="1" />
                  <el-option label="中" :value="2" />
                  <el-option label="高" :value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="有机质(%)" prop="organicMatter">
                <el-input-number v-model="landForm.organicMatter" :min="0" :max="100" :precision="1" :step="0.5" :controls-position="'right'" @change="handleValueChange('organicMatter', $event)" style="width: 100%" />
                <div class="value-controls">
                  <span>当前值: {{ landForm.organicMatter }}</span>
                  <el-button-group size="small">
                    <el-button type="primary" @click="incrementValue('organicMatter', 0.5)">+0.5</el-button>
                    <el-button type="danger" @click="decrementValue('organicMatter', 0.5)">-0.5</el-button>
                  </el-button-group>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="氮(%)" prop="nitrogen">
                <el-input-number v-model="landForm.nitrogen" :min="0" :max="100" :precision="2" :step="0.05" :controls-position="'right'" @change="handleValueChange('nitrogen', $event)" style="width: 100%" />
                <div class="value-controls">
                  <span>当前值: {{ landForm.nitrogen }}</span>
                  <el-button-group size="small">
                    <el-button type="primary" @click="incrementValue('nitrogen', 0.05)">+0.05</el-button>
                    <el-button type="danger" @click="decrementValue('nitrogen', 0.05)">-0.05</el-button>
                  </el-button-group>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="磷(%)" prop="phosphorus">
                <el-input-number v-model="landForm.phosphorus" :min="0" :max="100" :precision="2" :step="0.05" :controls-position="'right'" @change="handleValueChange('phosphorus', $event)" style="width: 100%" />
                <div class="value-controls">
                  <span>当前值: {{ landForm.phosphorus }}</span>
                  <el-button-group size="small">
                    <el-button type="primary" @click="incrementValue('phosphorus', 0.05)">+0.05</el-button>
                    <el-button type="danger" @click="decrementValue('phosphorus', 0.05)">-0.05</el-button>
                  </el-button-group>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="钾(%)" prop="potassium">
                <el-input-number v-model="landForm.potassium" :min="0" :max="100" :precision="2" :step="0.05" :controls-position="'right'" @change="handleValueChange('potassium', $event)" style="width: 100%" />
                <div class="value-controls">
                  <span>当前值: {{ landForm.potassium }}</span>
                  <el-button-group size="small">
                    <el-button type="primary" @click="incrementValue('potassium', 0.05)">+0.05</el-button>
                    <el-button type="danger" @click="decrementValue('potassium', 0.05)">-0.05</el-button>
                  </el-button-group>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="土地图片" prop="image">
            <el-upload
              class="land-image-uploader"
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleImageChange"
            >
              <img v-if="landForm.image" :src="landForm.image" class="land-image" />
              <el-icon v-else class="land-image-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="el-upload__tip">点击上传土地图片，只能上传jpg/png格式</div>
          </el-form-item>
        </el-form>
        
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitLandForm" :loading="submitting">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <!-- 土地详情对话框 -->
    <div class="agri-dialog-wrapper">
      <el-dialog
        v-model="detailDialogVisible"
        title="土地详情"
        width="750px"
      >
        <div v-if="currentLand" class="land-detail">
          <div class="land-detail-header">
            <div class="land-detail-title">{{ currentLand.name }}</div>
            <div class="land-detail-subtitle">{{ currentLand.location }}</div>
          </div>
          
          <div class="land-detail-content">
            <div class="land-detail-image">
              <img :src="currentLand.image || 'https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=500&auto=format&fit=crop'" alt="土地图片">
            </div>
            
            <div class="land-detail-info">
              <el-descriptions title="基本信息" :column="2" border>
                <el-descriptions-item label="面积">{{ currentLand.area }} 亩</el-descriptions-item>
                <el-descriptions-item label="土地类型">{{ currentLand.typeName }}</el-descriptions-item>
                <el-descriptions-item label="土壤类型">{{ currentLand.soilTypeName }}</el-descriptions-item>
                <el-descriptions-item label="灌溉条件">{{ currentLand.irrigationName }}</el-descriptions-item>
                <el-descriptions-item label="pH值">{{ currentLand.ph }}</el-descriptions-item>
                <el-descriptions-item label="肥力等级">{{ currentLand.fertilityName }}</el-descriptions-item>
                <el-descriptions-item label="创建日期">{{ currentLand.createdAt }}</el-descriptions-item>
              </el-descriptions>
              
              <el-descriptions title="土壤成分" :column="3" border class="mt-20">
                <el-descriptions-item label="有机质">{{ currentLand.organicMatter }}%</el-descriptions-item>
                <el-descriptions-item label="氮">{{ currentLand.nitrogen }}%</el-descriptions-item>
                <el-descriptions-item label="磷">{{ currentLand.phosphorus }}%</el-descriptions-item>
                <el-descriptions-item label="钾">{{ currentLand.potassium }}%</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useFarmerStore } from '../../store';
import { Location, Plus, Refresh, More } from '@element-plus/icons-vue';

// 状态管理
const farmerStore = useFarmerStore();

// 本地状态
const loading = ref(false);
const submitting = ref(false);
const activeTab = ref('card');
const lands = ref([]);
const dialogVisible = ref(false);
const detailDialogVisible = ref(false);
const isEdit = ref(false);
const landFormRef = ref(null);
const currentLand = ref(null);

// 表单数据
const landForm = reactive({
  id: null,
  name: '',
  location: '',
  area: 0,
  type: 1,
  soilType: 1,
  ph: 7.0,
  fertility: 2,
  irrigation: 2,
  organicMatter: 0,
  nitrogen: 0,
  phosphorus: 0,
  potassium: 0,
  image: ''
});

// 表单验证规则
const landRules = {
  name: [
    { required: true, message: '请输入土地名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  location: [
    { required: true, message: '请输入地理位置', trigger: 'blur' }
  ],
  area: [
    { required: true, message: '请输入面积', trigger: 'blur' },
    { type: 'number', min: 0.1, message: '面积必须大于0', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择土地类型', trigger: 'change' }
  ],
  soilType: [
    { required: true, message: '请选择土壤类型', trigger: 'change' }
  ],
  ph: [
    { required: true, message: '请输入pH值', trigger: 'blur' },
    { type: 'number', min: 0, max: 14, message: 'pH值范围为0-14', trigger: 'blur' }
  ],
  fertility: [
    { required: true, message: '请选择肥力等级', trigger: 'change' }
  ],
  irrigation: [
    { required: true, message: '请选择灌溉条件', trigger: 'change' }
  ]
};

// 获取土地数据
const fetchLands = async () => {
  loading.value = true;
  try {
    const result = await farmerStore.fetchLands();
    // 确保 result 是数组
    lands.value = Array.isArray(result) ? result : [];
    console.log('获取到的土地数据:', lands.value);
  } catch (error) {
    console.error('获取土地数据失败', error);
    ElMessage.error('获取土地数据失败');
  } finally {
    loading.value = false;
  }
};

// 刷新数据
const refreshData = () => {
  fetchLands();
};

// 处理添加土地
const handleAddLand = () => {
  console.log('点击了添加土地按钮');
  isEdit.value = false;
  resetLandForm();
  dialogVisible.value = true;
  console.log('对话框应该显示，dialogVisible:', dialogVisible.value);
};

// 处理编辑土地
const handleEditLand = (land) => {
  isEdit.value = true;
  Object.keys(landForm).forEach(key => {
    if (key in land) {
      landForm[key] = land[key];
    }
  });
  dialogVisible.value = true;
};

// 处理查看土地详情
const handleViewLand = (land) => {
  currentLand.value = {
    ...land,
    soilTypeName: getSoilTypeName(land.soilType),
    typeName: getLandTypeName(land.type),
    fertilityName: getFertilityName(land.fertility),
    irrigationName: getIrrigationName(land.irrigation),
    createdAt: formatDate(land.createTime),
    ph: land.ph || 7.0,
    organicMatter: land.organicMatter || 0,
    nitrogen: land.nitrogen || 0,
    phosphorus: land.phosphorus || 0,
    potassium: land.potassium || 0
  };

  detailDialogVisible.value = true;
};

// 转换土壤类型为文本
const getSoilTypeName = (type) => {
  const types = {
    1: '砂质土',
    2: '粘土',
    3: '壤土',
    4: '石灰土',
    5: '其他'
  };
  return types[type] || type;
};

// 转换土地类型为文本
const getLandTypeName = (type) => {
  const types = {
    1: '水田',
    2: '旱地',
    3: '果园',
    4: '菜地',
    5: '其他'
  };
  return types[type] || type;
};

// 转换肥力等级为文本
const getFertilityName = (level) => {
  const levels = {
    1: '低',
    2: '中',
    3: '高'
  };
  return levels[level] || level;
};

// 转换灌溉条件为文本
const getIrrigationName = (level) => {
  const levels = {
    1: '差',
    2: '一般',
    3: '好'
  };
  return levels[level] || level;
};

// 处理删除土地
const handleDeleteLand = (land) => {
  ElMessageBox.confirm(
    `确定要删除"${land.name}"吗？此操作不可逆。`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      loading.value = true;
      await farmerStore.removeLand(land.id);
      ElMessage.success('删除成功');
      fetchLands();
    } catch (error) {
      console.error('删除土地失败', error);
      ElMessage.error('删除土地失败');
    } finally {
      loading.value = false;
    }
  }).catch(() => {});
};

// 处理下拉菜单命令
const handleCommand = (command, land) => {
  switch (command) {
    case 'view':
      handleViewLand(land);
      break;
    case 'edit':
      handleEditLand(land);
      break;
    case 'delete':
      handleDeleteLand(land);
      break;
  }
};

// 处理图片变更
const handleImageChange = (file) => {
  // 实际项目中应该上传到服务器
  // 这里仅做演示，直接读取本地图片
  const reader = new FileReader();
  reader.onload = (e) => {
    landForm.image = e.target.result;
  };
  reader.readAsDataURL(file.raw);
};

// 提交土地表单
const submitLandForm = async () => {
  console.log('提交土地表单');
  if (!landFormRef.value) {
    console.error('表单引用不存在');
    return;
  }
  
  await landFormRef.value.validate(async (valid) => {
    console.log('表单验证结果:', valid);
    if (!valid) {
      console.error('表单验证失败');
      return;
    }
    
    try {
      submitting.value = true;
      
      // 确保数值字段是数字类型
      const formData = {
        ...landForm,
        area: Number(landForm.area),
        type: Number(landForm.type),
        soilType: Number(landForm.soilType),
        ph: Number(landForm.ph),
        fertility: Number(landForm.fertility),
        irrigation: Number(landForm.irrigation),
        organicMatter: Number(landForm.organicMatter),
        nitrogen: Number(landForm.nitrogen),
        phosphorus: Number(landForm.phosphorus),
        potassium: Number(landForm.potassium)
      };
      
      console.log('处理后提交的表单数据:', JSON.stringify(formData));
      
      if (isEdit.value) {
        await farmerStore.updateLandInfo(formData.id, formData);
        ElMessage.success('更新成功');
      } else {
        console.log('调用创建土地接口');
        await farmerStore.createLand(formData);
        ElMessage.success('添加成功');
      }
      
      dialogVisible.value = false;
      fetchLands();
    } catch (error) {
      console.error('保存土地失败', error);
      ElMessage.error('保存土地失败: ' + (error.message || '未知错误'));
    } finally {
      submitting.value = false;
    }
  });
};

// 重置表单
const resetLandForm = () => {
  // 每次调用重置表单都会显示日志
  console.log('重置表单');
  
  // 初始化表单值
  landForm.id = null;
  landForm.name = '';
  landForm.location = '';
  landForm.area = 0.1; // 修改为大于0的值，避免验证错误
  landForm.type = 1;
  landForm.soilType = 1;
  landForm.ph = 7.0;
  landForm.fertility = 2;
  landForm.irrigation = 2;
  landForm.organicMatter = 0.0;
  landForm.nitrogen = 0.0;
  landForm.phosphorus = 0.0;
  landForm.potassium = 0.0;
  landForm.image = '';
  
  // 在修改值后打印当前的表单值
  console.log('重置后的表单数据:', {
    area: landForm.area,
    ph: landForm.ph,
    organicMatter: landForm.organicMatter,
    nitrogen: landForm.nitrogen,
    phosphorus: landForm.phosphorus,
    potassium: landForm.potassium
  });
  
  // 在下一个事件循环再次检查值，确保它们已被正确设置
  setTimeout(() => {
    console.log('延迟检查表单数据:', {
      area: landForm.area,
      ph: landForm.ph,
      organicMatter: landForm.organicMatter,
      nitrogen: landForm.nitrogen,
      phosphorus: landForm.phosphorus,
      potassium: landForm.potassium
    });
  }, 0);
  
  if (landFormRef.value) {
    landFormRef.value.resetFields();
    // 重置表单后，再次检查值
    console.log('resetFields后的数据:', {
      area: landForm.area,
      ph: landForm.ph,
      organicMatter: landForm.organicMatter,
      nitrogen: landForm.nitrogen,
      phosphorus: landForm.phosphorus,
      potassium: landForm.potassium
    });
  }
};

// 数值变化处理函数
const handleValueChange = (field, value) => {
  console.log(`${field} 变更为:`, value);
  landForm[field] = value;
};

// 增加数值
const incrementValue = (field, step) => {
  const currentValue = Number(landForm[field] || 0);
  const newValue = parseFloat((currentValue + step).toFixed(2));
  console.log(`${field} 增加 ${step}, 从 ${currentValue} 变为 ${newValue}`);
  landForm[field] = newValue;
};

// 减少数值
const decrementValue = (field, step) => {
  const currentValue = Number(landForm[field] || 0);
  const newValue = Math.max(0, parseFloat((currentValue - step).toFixed(2)));
  console.log(`${field} 减少 ${step}, 从 ${currentValue} 变为 ${newValue}`);
  landForm[field] = newValue;
};

// 格式化日期
const formatDate = (timestamp) => {
  const date = new Date(timestamp);
  return date.toLocaleString();
};

// 组件挂载时获取数据
onMounted(() => {
  fetchLands();
});
</script>

<style scoped>
.land-management-container {
  padding: 20px;
  background-color: #f8fbf8; /* 微绿背景色 */
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background-color: #f0f7f0;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 120, 0, 0.05);
}

.page-title {
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #2c7c2c; /* 深绿色标题 */
}

.page-title .el-icon {
  margin-right: 8px;
  font-size: 24px;
  color: #4caf50; /* 绿色图标 */
}

.page-actions {
  display: flex;
  gap: 10px;
}

.land-list-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: none;
  background-color: #ffffff;
}

.land-card {
  height: 100%;
  margin-bottom: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid #e8f5e9;
  overflow: hidden;
  background-color: #ffffff;
}

.land-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 120, 0, 0.1);
  border-color: #c8e6c9;
}

.land-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f1f8e9;
  border-bottom: 1px solid #e8f5e9;
}

.land-card-title {
  font-size: 16px;
  font-weight: bold;
  color: #2e7d32;
}

.land-card-image {
  height: 180px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
}

.land-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.land-card-content {
  margin-bottom: 15px;
  padding: 0 10px;
}

.land-card-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  padding: 5px 0;
  border-bottom: 1px dashed #e0e0e0;
}

.land-card-item:last-child {
  border-bottom: none;
}

.land-card-item-label {
  color: #757575;
  font-size: 14px;
}

.land-card-item-value {
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}

.land-card-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f9f9f9;
  border-top: 1px solid #f0f0f0;
}

.land-image-uploader {
  width: 100%;
}

.land-image-uploader .el-upload {
  width: 200px;
  height: 200px;
  border: 1px dashed #4caf50;  /* 绿色边框 */
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.land-image-uploader .el-upload:hover {
  border-color: #2e7d32;  /* 深绿色边框 */
  background-color: #f1f8e9;  /* 浅绿色背景 */
}

.land-image-uploader-icon {
  font-size: 28px;
  color: #4caf50;  /* 绿色图标 */
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.land-image {
  width: 200px;
  height: 200px;
  display: block;
  object-fit: cover;
}

.land-detail {
  width: 100%;
}

.land-detail-header {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f1f8e9;
  border-radius: 8px;
}

.land-detail-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #2e7d32;
}

.land-detail-subtitle {
  color: #689f38;
}

.land-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.land-detail-image {
  width: 100%;
  max-height: 300px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.land-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.land-detail-info {
  flex: 1;
}

.empty-data {
  padding: 40px 0;
  background-color: #f9f9f9;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .el-button {
    flex: 1;
  }
}

.current-value {
  font-size: 12px;
  color: #606266;
  margin-top: 2px;
}

.value-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  font-size: 12px;
  color: #606266;
}

.value-controls .el-button-group {
  margin-left: 10px;
}

.value-controls .el-button {
  padding: 2px 5px;
  font-size: 12px;
}

/* 操作按钮样式 */
.operation-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

/* 表格美化 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8f5e9;
}

:deep(.el-table th) {
  background-color: #f1f8e9 !important;
  color: #2e7d32;
  font-weight: bold;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #f8fbf8;
}

:deep(.el-table__row:hover td) {
  background-color: #e8f5e9 !important;
}

/* 对话框美化 */
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  background-color: #f1f8e9;
  padding: 15px 20px;
  margin: 0;
  color: #2e7d32;
  border-bottom: 1px solid #e8f5e9;
}

:deep(.el-dialog__title) {
  color: #2e7d32;
  font-weight: bold;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid #e8f5e9;
  padding: 15px 20px;
}

/* 分页美化 */
:deep(.el-pagination) {
  padding: 15px 0;
  justify-content: center;
}

:deep(.el-pagination .el-pagination__total) {
  color: #2e7d32;
}

/* 标签页美化 */
:deep(.el-tabs__item) {
  color: #757575;
}

:deep(.el-tabs__item.is-active) {
  color: #2e7d32;
}

:deep(.el-tabs__active-bar) {
  background-color: #4caf50;
}

.mt-20 {
  margin-top: 20px;
}
</style> 